<template>
    <ElConfigProvider :locale="locale">
        <el-date-picker clearable class="date_picker" :style="{width:width+'px'}" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="innerValue" type="date" :placeholder="ph" />
    </ElConfigProvider>
</template>

<script setup>
import { ref,watch,computed } from 'vue'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
const locale = ref(zhCn); //日期框必须要用这个包，所以很麻烦，写个组件封装起来

const emit = defineEmits(['update:value']) //此处要完全对应，采用固定的update:prop属性
const props = defineProps({
    value: { type: String, require: true },
    ph: { type: String, default: "选择日期" },
    width:  { type: Number, default: 140 },
})
let innerValue = computed({
    get() { return props.value },
    set(val) {
        if(val){
            emit('update:value', val)
        }else{
            emit('update:value', null)
        }
    }
})
//以下直接绑props的值，编译后会出错，因此只能用个假的计算属性
// watch(
//     () => props.value,
//     (val) => {
//         console.log("val",val)
//         emit('update:value', val) //组件里的props是只读的，要想做成双向绑定，必须要加watch事件，并且抛出指定的update:prop属性
//         //外面写法也有变化，不能:value=""，要改为v-model:value=""，就能得到更新后的值
//     }
// )
</script>

<style scoped>
</style>